<template>
  <div class="page-bgBack">
    <PageHeader @back="$router.go(-1)" subTitle="返回">
      {{ $route.query.id ? "编辑客户" : "新增客户" }}
    </PageHeader>
    <div class="box">
      <a-form :form="form" layout="vertical">
        <tit style="margin:22px 0 24px; 0">公司信息</tit>
        <a-row>
          <a-col class="col">
            <a-form-item label="公司名称">
              <a-input
                allowClear
                placeholder="请输入公司名称"
                autocomplete="off"
                v-decorator="['companyName', { rules: [{ required: true, message: '公司名称不能为空' }] }]"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="公司类型">
              <a-select allowClear v-decorator="['companyType']" placeholder="请选择公司类型" class="w400">
                <a-select-option :value="item.v" v-for="item in companyTypeSelectArr" :key="item.k">
                  {{ item.k }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="公司所在城市">
              <city :default-value="socCity" :level="3" @change="handleCity($event)" class="w400" />
              <a-input
                v-show="false"
                allowClear
                placeholder="请输入公司所在城市"
                autocomplete="off"
                v-decorator="['socCitys', { rules: [{ required: true, message: '公司所在城市不能为空' }] }]"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="公司详细地址">
              <a-input
                allowClear
                placeholder="请输入公司详细地址"
                autocomplete="off"
                v-decorator="['companyAddress', { rules: [{ required: true, message: '公司详细地址不能为空' }] }]"
                class="w400"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="公司行业">
              <a-input allowClear placeholder="请输入公司行业" autocomplete="off" v-decorator="['companyIndustry']" class="w400" />
              <!-- <a-select v-decorator="['companyIndustry']" placeholder="请选择" class="w400">
                <a-select-option :value="item.v" v-for="item in selectArr" :key="item.k">
                  {{ item.k }}
                </a-select-option>
              </a-select> -->
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="公司规模">
              <a-select allowClear v-decorator="['companyPersonSize']" placeholder="请选择公司规模" class="w400">
                <a-select-option :value="item.v" v-for="item in companyPersonSizeSelectArr" :key="item.k">
                  {{ item.k }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="项目名称">
              <a-input
                allowClear
                placeholder="请输入项目名称"
                autocomplete="off"
                v-decorator="['entryName', { rules: [{ required: false, message: '项目名称不能为空' }] }]"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="产品名称">
              <a-input allowClear placeholder="请输入产品名称" autocomplete="off" v-decorator="['productName']" class="w400" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="客户情况">
              <a-input allowClear placeholder="请输入客户情况" autocomplete="off" v-decorator="['customerSituation']" class="w400" />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="客户需求">
              <a-select mode="multiple" allowClear v-decorator="['customerDemand']" placeholder="请选择客户需求" class="w400">
                <a-select-option :value="item.v" v-for="item in customerDemandSelectArr" :key="item.k">
                  {{ item.k }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="预计签约时间">
              <a-date-picker
                valueFormat="YYYY-MM-DD"
                placeholder="请选择预计签约时间"
                v-decorator="['estimatedSigningTime']"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="预计派单时间">
              <a-date-picker
                valueFormat="YYYY-MM-DD"
                placeholder="请选择预计派单时间"
                v-decorator="['estimatedDistributeTime']"
                class="w400"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="客户介绍">
              <a-textarea
                allowClear
                v-decorator="['customerIntroduce']"
                placeholder="请输入客户介绍"
                :auto-size="{ minRows: 3, maxRows: 5 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="备注">
              <a-textarea allowClear v-decorator="['mark']" placeholder="请输入备注" :auto-size="{ minRows: 3, maxRows: 5 }" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item>
              <div slot="label">
                <span class="fs14 fw500">上传合同</span>
                <span class="fs12 ml8" style="color: rgba(118, 120, 133, 1)"
                  >支持 doc，ppt，pdf，jpg，png 等格式文件，文件不得超过20M。</span
                >
              </div>
              <div class="uploadBoxes">
                <uploadImg style="min-height: 96px" :val="contract" :num="10" @upData="upData1">
                  <div class="uploadBox">
                    <div>
                      <a-icon type="plus-circle" theme="filled" />
                    </div>
                    <div class="font">上传合同</div>
                  </div>
                </uploadImg>
              </div>
              <div v-if="$route.query.type == 2">
                <a-input
                  allowClear
                  placeholder="请输入"
                  autocomplete="off"
                  v-decorator="['contract', { rules: [{ required: true, message: '合同不能为空' }] }]"
                  class="w400"
                  v-show="false"
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="合同有效期">
              <a-range-picker valueFormat="YYYY-MM-DD" v-decorator="['contractTime']" class="w400" v-if="$route.query.type == 1" />
              <a-range-picker
                valueFormat="YYYY-MM-DD"
                v-decorator="['contractTime', { rules: [{ required: true, message: '合同有效期不能为空' }] }]"
                class="w400"
                v-else
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item>
              <div slot="label">
                <span class="fs14 fw500">上传营业执照</span>
                <span class="fs12 ml8" style="color: rgba(118, 120, 133, 1)"
                  >支持 doc，ppt，pdf，jpg，png 等格式文件，文件不得超过20M。</span
                >
              </div>
              <div class="uploadBoxes">
                <uploadImg style="min-height: 96px" :num="10" :val="businessLicense" @upData="upData2">
                  <div class="uploadBox">
                    <div>
                      <a-icon type="plus-circle" theme="filled" />
                    </div>
                    <div class="font">上传营业执照</div>
                  </div>
                </uploadImg>
              </div>
              <div v-if="$route.query.type == 2">
                <a-input
                  allowClear
                  placeholder="请输入"
                  autocomplete="off"
                  v-decorator="['businessLicense', { rules: [{ required: true, message: '营业执照不能为空' }] }]"
                  class="w400"
                  v-show="false"
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <a-form-item label="合作产品">
              <a-input
                allowClear
                placeholder="请输入合作产品"
                autocomplete="off"
                v-decorator="['cooperativeProducts']"
                class="w400"
                v-if="$route.query.type == 1"
              />
              <a-input
                allowClear
                placeholder="请输入合作产品"
                autocomplete="off"
                v-decorator="['cooperativeProducts', { rules: [{ required: true, message: '合作产品不能为空' }] }]"
                class="w400"
                v-else
              />
            </a-form-item>
          </a-col>
        </a-row>
        <tit style="margin: 22px 0 24px; 0">联系人信息</tit>
        <a-row>
          <a-col class="col">
            <a-form-item label="联系人姓名">
              <a-input
                allowClear
                placeholder="请输入联系人姓名"
                :maxLength="10"
                autocomplete="off"
                v-decorator="['name', { rules: [{ required: true, message: '联系人姓名不能为空' }] }]"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="性别">
              <a-radio-group v-decorator="['gender']" class="w400">
                <a-radio :value="1"> 男 </a-radio>
                <a-radio :value="2"> 女 </a-radio>
                <a-radio :value="3"> 未知 </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="手机">
              <a-input
                allowClear
                placeholder="请输入手机"
                autocomplete="off"
                v-decorator="[
                  'phone',
                  {
                    rules: [
                      { required: true, message: '手机不能为空' },
                      {
                        pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                        message: '请输入11位数字类型手机号'
                      }
                    ]
                  }
                ]"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="邮箱">
              <a-input
                allowClear
                placeholder="请输入邮箱"
                autocomplete="off"
                v-decorator="[
                  'email',
                  {
                    rules: [
                      {
                        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                        message: '请输入正确的邮箱'
                      }
                    ]
                  }
                ]"
                class="w400"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="微信">
              <a-input allowClear placeholder="请输入微信" autocomplete="off" :maxLength="18" v-decorator="['wechat']" class="w400" />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="职位">
              <a-input allowClear placeholder="请输入职位" autocomplete="off" :maxLength="10" v-decorator="['postName']" class="w400" />
            </a-form-item>
          </a-col>
        </a-row>
        <tit style="margin:22px 0 24px; 0">法人信息</tit>
        <a-row>
          <a-col class="col">
            <a-form-item label="法人姓名">
              <a-input
                allowClear
                placeholder="请输入法人姓名"
                autocomplete="off"
                :maxLength="10"
                v-decorator="['legalPersonName']"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="性别">
              <a-radio-group v-decorator="['legalPersonGender']" class="w400">
                <a-radio :value="1"> 男 </a-radio>
                <a-radio :value="2"> 女 </a-radio>
                <a-radio :value="3"> 未知 </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="手机">
              <a-input
                allowClear
                placeholder="请输入法人手机"
                autocomplete="off"
                v-decorator="[
                  'legalPersonPhone',
                  {
                    rules: [
                      {
                        pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                        message: '请输入11位数字类型手机号'
                      }
                    ]
                  }
                ]"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="邮箱">
              <a-input
                allowClear
                placeholder="请输入法人邮箱"
                autocomplete="off"
                v-decorator="[
                  'legalPersonEmail',
                  {
                    rules: [
                      {
                        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                        message: '请输入正确的邮箱'
                      }
                    ]
                  }
                ]"
                class="w400"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col class="col">
            <a-form-item label="微信">
              <a-input
                allowClear
                placeholder="请输入法人微信"
                autocomplete="off"
                :maxLength="18"
                v-decorator="['legalPersonWechat']"
                class="w400"
              />
            </a-form-item>
          </a-col>
          <a-col class="col">
            <a-form-item label="职位">
              <a-input
                allowClear
                placeholder="请输入法人职位"
                autocomplete="off"
                :maxLength="10"
                v-decorator="['legalPersonPostName']"
                class="w400"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item class="btn">
          <a-button style="margin-right: 12px" @click="$router.go(-1)"> 取消 </a-button>
          <a-button style="margin-right: 12px" type="primary" @click="handleSubmit"> 提交 </a-button>
          <a-button type="primary" v-if="$route.query.type == 1 && $route.query.id" @click="handleSubmit('isSign')"> 签约客户 </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { AreaPicker as city } from "xqjr-plugin-common";
import tit from "../component/tit";
import uploadImg from "../component/uploadImg";
import { getSaveCustomer, putCrmCustomerInfos, getQueryCustomerInfo } from "./api";
const companyTypeSelectArr = [
  { k: "有限责任", v: 1 },
  { k: "个人独资", v: 2 },
  { k: "股权有限责任", v: 3 },
  { k: "其他", v: 4 }
];
const customerDemandSelectArr = [
  { k: "商业险", v: "1" },
  { k: "单工伤", v: "2" },
  { k: "深圳五险", v: "3" },
  { k: "发薪报税", v: "4" },
  { k: "代理委托", v: "5" },
  { k: "劳务派遣", v: "6" },
  { k: "劳务外包", v: "7" },
  { k: "灵活用工", v: "8" }
];
const companyPersonSizeSelectArr = [
  { k: "500以下", v: 1 },
  { k: "500-1000", v: 2 },
  { k: "1000-3000", v: 3 },
  { k: "3000以上", v: 4 }
];
export default {
  components: {
    city,
    tit,
    uploadImg
  },
  data() {
    return {
      form: this.$form.createForm(this, {}),
      confirmLoading: false,
      socCity: "",
      socCityName: "",
      companyTypeSelectArr,
      customerDemandSelectArr,
      companyPersonSizeSelectArr,
      contract: "",
      businessLicense: ""
    };
  },
  created() {
    if (this.$route.query.id) {
      this.onGetQueryCustomerInfo();
    }
  },
  methods: {
    moment,
    async onGetQueryCustomerInfo() {
      try {
        const { data } = await getQueryCustomerInfo({
          customerId: this.$route.query.id,
          isPublic: this.$route.path === "clientele/sea/edit"
        });

        const form = data;
        const companyAddress = form.companyAddress ? form.companyAddress.split(",") : [];
        if (companyAddress.length >= 2) {
          form.companyAddress = companyAddress[2] ? companyAddress[2] : "";
          this.socCity = companyAddress[0] ? companyAddress[0] : "";
          this.socCityName = companyAddress[1] ? companyAddress[1] : "";
        }
        form.customerDemand = form.customerDemand ? form.customerDemand.split(",") : [];
        form.estimatedSigningTime = form.estimatedSigningTime ? moment(form.estimatedSigningTime).format("YYYY-MM-DD") : null;
        form.estimatedDistributeTime = form.estimatedDistributeTime ? moment(form.estimatedDistributeTime).format("YYYY-MM-DD") : null;
        const contractStartTime = form.contractStartTime ? moment(form.contractStartTime).format("YYYY-MM-DD") : null;
        const contractEndTime = form.contractEndTime ? moment(form.contractEndTime).format("YYYY-MM-DD") : null;
        this.contract = form.contract || "";
        this.businessLicense = form.businessLicense || "";
        setTimeout(() => {
          this.form.setFieldsValue({
            name: form.name,
            gender: form.gender,
            phone: form.phone,
            email: form.email,
            wechat: form.wechat,
            postName: form.postName,
            legalPersonName: form.legalPersonName,
            legalPersonGender: form.legalPersonGender,
            legalPersonPhone: form.legalPersonPhone,
            legalPersonEmail: form.legalPersonEmail,
            legalPersonWechat: form.legalPersonWechat,
            legalPersonPostName: form.legalPersonPostName,
            companyName: form.companyName,
            companyType: form.companyType || undefined,
            companyAddress: form.companyAddress,
            companyIndustry: form.companyIndustry,
            companyPersonSize: form.companyPersonSize || undefined,
            customerSituation: form.customerSituation,
            customerDemand: form.customerDemand,
            estimatedSigningTime: form.estimatedSigningTime,
            estimatedDistributeTime: form.estimatedDistributeTime,
            customerIntroduce: form.customerIntroduce,
            mark: form.mark,
            cooperativeProducts: form.cooperativeProducts,
            contractTime: contractStartTime ? [contractStartTime, contractEndTime] : null,
            entryName: form.entryName,
            productName: form.productName,
            socCitys: this.socCity
          });
          if (parseInt(this.$route.query.type) === 2) {
            this.form.setFieldsValue({
              contract: form.contract,
              businessLicense: form.businessLicense
            });
          }
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
      setTimeout(() => {
        this.form.setFieldsValue({
          socCitys: this.socCity
        });
      });
    },
    async onGetSaveCustomer(v) {
      try {
        await getSaveCustomer(v);
        this.$notification.success({ message: "操作成功" });
        this.$router.go(-1);
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPutCrmCustomerInfos(v) {
      try {
        await putCrmCustomerInfos(v);
        this.$notification.success({ message: "操作成功" });
        this.$router.go(-1);
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    upData1(e) {
      this.contract = e;
      setTimeout(() => {
        this.form.setFieldsValue({
          contract: e
        });
      });
    },
    upData2(e) {
      this.businessLicense = e;
      setTimeout(() => {
        this.form.setFieldsValue({
          businessLicense: e
        });
      });
    },
    handleSubmit(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          for (const key in values) {
            if (!values[key]) values[key] = null;
          }
          values.type = this.$route.query.type;
          values.gender = values.gender ? parseInt(values.gender) : null;
          values.legalPersonGender = values.legalPersonGender ? parseInt(values.legalPersonGender) : null;
          let companyAddress = [];
          if (this.socCity) companyAddress = [this.socCity, this.socCityName];
          if (values.companyAddress) companyAddress = [values.companyAddress];
          if (this.socCity && values.companyAddress) companyAddress = [this.socCity, this.socCityName, values.companyAddress];
          values.companyAddress = companyAddress.join(",") || null;
          values.customerDemand = values.customerDemand ? values.customerDemand.join(",") : null;
          values.contractStartTime = values.contractTime ? values.contractTime[0] : null;
          values.contractEndTime = values.contractTime ? values.contractTime[1] : null;
          values.contract = this.contract || null;
          values.businessLicense = this.businessLicense || null;
          delete values.contractTime;
          if (parseInt(this.$route.query.type) === 2) {
            values.isSign = true;
          }
          if (e === "isSign") {
            if (!values.contract) return this.$notification.error({ message: "请上传合同" });
            if (!values.contractStartTime) return this.$notification.error({ message: "合同有效期不能为空" });
            if (!values.contractEndTime) return this.$notification.error({ message: "合同有效期不能为空" });
            if (!values.businessLicense) return this.$notification.error({ message: "请上传营业执照" });
            if (!values.cooperativeProducts) return this.$notification.error({ message: "合作产品不能为空" });
            values.isSign = true;
          }
          if (this.$route.query.id) {
            values.isPublic = this.$route.path === "/clientele/sea/edit";
            values.id = this.$route.query.id;
            this.onPutCrmCustomerInfos(values);
          } else {
            values.isPublic = this.$route.path !== "/clientele/myClientele/add";
            this.onGetSaveCustomer(values);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.uploadBoxes {
  .uploadBox {
    position: absolute;
    left: 16px;
    top: 16px;
  }
  ::v-deep .ant-upload-list {
    display: relative;
  }
  ::v-deep .ant-upload-list-picture-card {
    &::before {
      width: 112px;
      height: 104px;
      float: left;
    }
  }
}
.box {
  margin: 32px auto;
  padding-bottom: 40px;
  width: 840px;
  .w840 {
    width: 840px;
  }
  .w400 {
    width: 400px;
  }
  ::v-deep .ant-form-item {
    padding-bottom: 0;
  }
  .col {
    float: left;
    &:nth-child(1) {
      margin-right: 40px;
    }
  }
  .btn {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
  .uploadBoxes {
    width: 840px;
    min-height: 134px;
    background: #f4f6fa;
    border-radius: 4px;
    padding: 16px;
    padding-bottom: 4px;
    .uploadBox {
      width: 104px;
      height: 104px;
      background: #fff;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px dashed #dedede;
      &:hover {
        border-color: var(--primary);
      }
      i {
        width: 20px;
        height: 20px;
        font-size: 20px;
        color: var(--primary);
      }
      .font {
        margin-top: 6px;
        color: var(--primary);
      }
    }
    .uploadFont {
      float: left;
      width: 320px;
      margin-left: 12px;
      font-weight: 400;
      color: #767885;
      line-height: 21px;
      font-size: 14px;
      padding-top: 6px;
    }
  }
  ::v-deep .ant-form {
    margin-left: 0 !important;
  }
  ::v-deep .ant-form-item-label {
    margin-bottom: 8px !important;
    label {
      font-weight: normal !important;
    }
  }
}
</style>
